<template>
  <div class="unique-part">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人门户</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/users' }"
        >个人门户管理</el-breadcrumb-item
      >
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-container class="container">
        <el-main>
          <!-- 搜索区域 -->
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input placeholder="请输入内容" v-model="query">
                <template v-slot:append>
                  <el-button @click="search" :icon="Search"></el-button>
                  <!-- <el-icon class="el-icon--right"><Search /></el-icon> -->
                </template>
              </el-input>
            </el-col>
            <!-- 添加用户 -->
            <el-col :span="4">
              <el-button class="add-user" type="primary" @click="addUser"
                >新建个人门户</el-button
              >
            </el-col>
            <!-- 占空的 -->
            <el-col :span="15">
              <div></div>
            </el-col>
            <!-- 门户列表 -->
            <div class="table">
              <el-table
                :data="userlist"
                :default-sort="{ prop: 'id', order: 'ascending' }"
                border
                class="userlist"
              >
                <el-table-column
                  prop="id"
                  label="序号"
                  sortable
                  width="80%"
                ></el-table-column>
                <el-table-column
                  prop="user_id"
                  label="用户id"
                  sortable
                  width="80%"
                ></el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column
                  prop="sex"
                  label="性别"
                  width="50%"
                ></el-table-column>
                <el-table-column prop="birth" label="生日" width="100%">
                </el-table-column>
                <el-table-column prop="phone" label="电话"> </el-table-column>
                <el-table-column prop="company" label="科研机构">
                </el-table-column>
                <el-table-column prop="department" label="二级学科分类">
                </el-table-column>
                <el-table-column prop="influence" label="影响力" width="80%">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作">
                  <template v-slot="scope">
                    <el-button
                      type="primary"
                      :icon="Edit"
                      circle
                      @click="handleEdit(scope.row)"
                    ></el-button>
                    <el-button
                      type="danger"
                      :icon="Delete"
                      circle
                      @click="handleDelete(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-row>
        </el-main>
        <el-footer>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @current-change="getUserList"
              v-model:currentPage="queryInfo.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-footer>
      </el-container>
    </el-card>

    <!-- 添加用户表格 -->
    <el-dialog title="新建个人门户" v-model="this.dialogVisible" width="40%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="选择性别">
            <el-option label="男" value="M"></el-option>
            <el-option label="女" value="F"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-date-picker
            v-model="ruleForm.birth"
            type="date"
            placeholder="选择生日"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="科研机构" prop="company">
          <el-input v-model="ruleForm.company"></el-input>
        </el-form-item>
        <el-form-item label="专业领域" prop="department">
          <el-input v-model="ruleForm.department"></el-input>
        </el-form-item>
        <el-form-item label="是否为机构" prop="is_company">
          <el-select v-model="ruleForm.is_company" placeholder="选择是否为机构">
            <el-option label="否" value="false"></el-option>
            <el-option label="是" value="true"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="button-div">
        <el-form-item class="form-button">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </div>
    </el-dialog>

    <!-- 修改用户表格 -->
    <el-dialog title="修改门户信息" v-model="this.changedialogVisible" width="40%">
      <el-form
        :model="changeForm"
        :rules="rules"
        ref="changeForm"
        label-width="100px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="changeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="changeForm.sex" placeholder="选择性别">
            <el-option label="男" value="M"></el-option>
            <el-option label="女" value="F"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-date-picker
            v-model="changeForm.birth"
            type="date"
            placeholder="选择生日"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="changeForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="科研机构" prop="company">
          <el-input v-model="changeForm.company"></el-input>
        </el-form-item>
        <el-form-item label="专业领域" prop="department">
          <el-input v-model="changeForm.department"></el-input>
        </el-form-item>
        <el-form-item label="影响力" prop="influence">
          <el-input v-model="changeForm.influence"></el-input>
        </el-form-item>
      </el-form>

      <div class="button-div">
        <el-form-item class="form-button">
          <el-button type="primary" @click="submitChangeForm('changeForm')"
            >修改</el-button
          >
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import axios from "axios";
  import { Search, Delete, Edit } from "@element-plus/icons";
</script>
<script>
  export default {
    data() {
      return {
        query: "",
        queryInfo: {
          query: "",
          page: 1,
          num: 10,
        },
        userlist: [],
        total: 0,
        dialogVisible: false,
        ruleForm: {
          name: null,
          sex: null,
          birth: null,
          phone: null,
          company: null,
          department: null,
          is_company: null,
        },
        rules: {
          name: [
            { required: true, message: "请输入姓名", trigger: "change" },
            {
              min: 1,
              max: 15,
              message: "长度在 1 到 15 个字符",
              trigger: "blur",
            },
          ],
          sex: [{ required: true, message: "请选择性别", trigger: "change" }],
          birth: [{ required: true, message: "请选择生日", trigger: "change" }],
          phone: [{ required: true, message: "请填写电话", trigger: "change" }],
          is_company: [
            { required: true, message: "请选择是否为机构", trigger: "change" },
          ],
        },
        changeForm: {
          id: null,
          name: null,
          sex: null,
          birth: null,
          phone: null,
          company: null,
          department: null,
          influence: null,
        },
        changedialogVisible: false,
      };
    },
    created() {
      this.query = sessionStorage.getItem("portal_query");
      if (this.query == null) {
        this.query = "";
      }
      this.queryInfo.query = this.query;
      this.getUserList();
    },
    methods: {
      getUserList() {
        axios.post("searchPortal/", this.queryInfo).then((response) => {
          this.userlist = response.data.source;
          this.total = response.data.total;
          console.log(response.data.source);
        });
      },
      handleDelete(row) {
        this.$confirm("您是否确认删除该门户?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const formData = {
              id: row.user_id,
            };
            axios.post("deletePortal/", formData).then((response) => {
              console.log(response);
              this.getUserList();
            });
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleEdit(row) {
        this.changedialogVisible = true;
        this.changeForm.name = row.name;
        this.changeForm.sex = row.sex;
        this.changeForm.birth = row.birth;
        this.changeForm.phone = row.phone;
        this.changeForm.company = row.company;
        this.changeForm.department = row.department;
        this.changeForm.influence = row.influence;
        this.changeForm.id = row.user_id;
      },
      addUser() {
        this.dialogVisible = true;
      },
      formatDate(birth) {
        var year = birth.getFullYear();
        var month = birth.getMonth()+1;
        var date = birth.getDate();
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        return year + "-" + month + "-" + date
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.is_company = this.ruleForm.is_company === "false" ? false : true;
            this.ruleForm.birth = this.formatDate(this.ruleForm.birth);
            axios.post("addPortal/", this.ruleForm).then((response) => {
              this.ruleForm = {};
              console.log(response.data);
              this.getUserList();
            });
            this.dialogVisible = false;
          } else {
            console.log("error submit!");
            return false;
          }
        });
      },
      resetForm() {
        this.changeForm.name = "";
        this.changeForm.sex = "";
        this.changeForm.birth = "";
        this.changeForm.phone = "";
        this.changeForm.company = "";
        this.changeForm.department = "";
        this.changeForm.influence = "";

        this.ruleForm.name = "";
        this.ruleForm.sex = "";
        this.ruleForm.birth = "";
        this.ruleForm.phone = "";
        this.ruleForm.company = "";
        this.ruleForm.department = "";
        this.ruleForm.is_company = "";
      },
      submitChangeForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.changeForm.birth = this.formatDate(this.changeForm.birth);
            axios.post("moifyPortl/", this.changeForm).then((response) => {
              console.log(response.data);
              this.getUserList();
            });
            this.changedialogVisible = false;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      search() {
        this.queryInfo.query = this.query;
        this.getUserList();
        sessionStorage.setItem("portal_query", this.query);
      },
      changeIdentity($event, row) {
        const formData = {
          username: row.username,
          password: row.password,
          email: row.email,
          is_administrator: row.is_administrator,
        };
        axios
          .put("admin/users/" + row.username + "/", formData)
          .then((response) => {
            console.log(response.data);
            this.getUserList();
          });
      },
    },
  };
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.add-user {
  width: 70%;
  align-content: center;
  text-align: center;
}

.userlist {
  margin-top: 20px;
  margin-left: 10px;
  font-size: 13px;
  /* width: 98%; */
}

.el-table {
  width: fit-content;
}

.table {
  width: 100%;
}

.el-container {
  height: 100%;
}

.el-pagination {
  margin-left: 10px;
  margin-top: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.form-button {
  display: block;
  width: fit-content;
}

.button-div {
  display: flex;
  justify-content: center;
}

.el-button {
  color: white !important;
}

.el-switch {
  margin-left: 30px;
}
</style>
